<template>
    <div v-if="option.series">
        <h1>echarts</h1>
        <div 
        ref="container"
        id="container" style="width:100%;height:500px"></div>
        <!-- v-model双向绑定 注意层级关系 -->
       选择器： <input v-model.number="option.series[0].data[0].value" /> <br/>
       动画： <input v-model.number="option.series[0].data[2].value" /> <br/>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        data(){
            return {
                //图表实例
                mychart:null,
                // 图表的选项
                option:{
                    title:{text:"jquery"},
                    tooltip:"",
                    legend:{},
                    xAxis:{},
                    yAxis:{},
                    series:[
                        {name:"jq",type:"pie",radius:["50%","30%"],
                        data:[
                            {name:"selector",value:60},
                            {name:"dom",value:20},
                            {name:"animate",value:30},
                            {name:"ajax",value:50}
                        ]}
                    ]
                }
            }
        },
        mounted(){
            // 在组件挂载后在创建实例
            this.mychart = echarts.init(this.$refs.container);
            // 更新选项（更新视图）
            this.mychart.setOption(this.option);
        },
        watch:{
            // 当数据option发生变化时候
            "option":{
                handler(){
                    // 更新选项
                    this.mychart.setOption(this.option);
                },
                deep:true
            }
        }
    }
</script>